<template>
  <a-popover placement="bottomLeft" trigger="click">
    <template slot="content">
      <a-tabs
        :activeKey="curTab"
        tabPosition="left"
        type="card"
        size="small"
        style="max-width: 640px"
        @change="handleTabChange"
      >
        <a-tab-pane v-for="o in icons" :key="o.key" :tab="o.title">
          <a-row class="ul-icon">
            <a-col
              :xs="8"
              :sm="3"
              v-for="(icon, key) in o.icons"
              :key="`${o.key}-${key}`"
              :class="{ active: curSelectIcon === icon }"
              class="li-icon"
              @click="handleSelectIcon(icon)"
            >
              <a-icon :type="icon" :style="{ fontSize: '26px' }" />
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </template>
    <a-input
      v-model="curSelectIcon"
      placeholder="输入图标名称或点击输入框选择图标"
      @change="inputChange"
      :allowClear="true"
    >
      <a-icon
        v-if="typeof curSelectIcon === 'string' && curSelectIcon.length > 0"
        :type="curSelectIcon"
        slot="prefix"
      />
      <!--      <a-icon-->
      <!--        v-if="typeof curSelectIcon === 'string' && curSelectIcon.length > 0"-->
      <!--        :type="closed"-->
      <!--        slot="prefix"-->
      <!--      />-->
    </a-input>
  </a-popover>
</template>

<script>
import icons from '@/components/IconSelector/icons'

export default {
  name: 'IconSelector',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      icons,
      curSelectIcon: this.value,
      curTab: ''
    }
  },
  created() {
    this.curTab = icons[0].key
    if (this.value) {
      this.autoSwitchTab()
    }
  },
  watch: {
    value(val) {
      this.curSelectIcon = val
      console.log('val', val)
      this.autoSwitchTab()
    }
  },
  methods: {
    handleSelectIcon(icon) {
      this.curSelectIcon = icon
      this.$emit('change', icon)
    },
    autoSwitchTab() {
      icons.some(item => item.icons.some(icon => icon === this.value) && (this.curTab = item.key))
    },
    handleTabChange(activeKey) {
      this.curTab = activeKey
    },
    inputChange(e) {
      console.log('e.target.value', e.target.value)
      // this.curSelectIcon = e.target.value
      console.log('this.curSelectIcon', this.curSelectIcon)
      this.$emit('change', e.target.value)
      if (e.target.value === '') {
        this.$emit('change', null)
      }
    },
    // 校验输入值是否与图标匹配
    validateIcon(value) {
      console.log(value)
      console.log(!icons.some(item => item.icons.some(icon => icon === value)))
      return icons.some(item => item.icons.some(icon => icon === value))
    }
  }
}
</script>

<style scoped lang="less">
@import '../../../components/index.less';

.ul-icon {
  overflow-y: scroll;
  height: 250px;
  text-align: center;

  .li-icon {
    padding: @padding-sm;
    border-radius: @border-radius-base;

    &:hover,
    &.active {
      // box-shadow: 0px 0px 5px 2px @primary-color;
      cursor: pointer;
      color: @white;
      background-color: @primary-color;
    }
  }
}
</style>
